<template>
  <div class="safety-culture-container">
    <!-- 顶部安全文化标题栏 -->
    <div class="top-bar">
      <span class="top-title">安全文化</span>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
      <div class="nav-item active">企业安全文化理念体系</div>
      <div class="nav-item">安全动态</div>
      <div class="nav-item">安全法律法规</div>
      <div class="nav-item">安全教育</div>
      <div class="nav-item">安全制度</div>
      <div class="nav-item">全员参与</div>
      <div class="nav-item">安全宣传片</div>
      <div class="nav-item">持续改进</div>
      <div class="nav-item">安全文化星级建设</div>
      <div class="nav-item">安全价值链</div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
      <!-- 左侧内容列 -->
      <div class="left-column">
        <!-- 企业安全文化理念体系 -->
        <div class="content-section">
          <div class="section-header">
            <h3>企业安全文化理念体系</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in safetyConceptItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 安全法律法规 -->
        <div class="content-section">
          <div class="section-header">
            <h3>安全法律法规</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in lawRegulationItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 安全制度 -->
        <div class="content-section">
          <div class="section-header">
            <h3>安全制度</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in safetySystemItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 右侧内容列 -->
      <div class="right-column">
        <!-- 安全动态 -->
        <div class="content-section">
          <div class="section-header">
            <h3>安全动态</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in safetyDynamicItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 安全教育 -->
        <div class="content-section">
          <div class="section-header">
            <h3>安全教育</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in safetyEducationItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 全员参与 -->
        <div class="content-section">
          <div class="section-header">
            <h3>全员参与</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in allStaffItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>

        <!-- 持续改进 -->
        <div class="content-section">
          <div class="section-header">
            <h3>持续改进</h3>
            <a href="#" class="view-more">查看更多 ></a>
          </div>
          <div class="section-content">
            <ul>
              <li v-for="item in continuousImprovementItems" :key="item.id">
                <span class="item-text">{{ item.text }}</span>
                <span class="item-date">{{ item.date }}</span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!-- 视频播放器区域 -->
    <div class="video-section">
      <div class="section-header">
        <h3>安全宣传片</h3>
        <a href="#" class="view-more">查看更多 ></a>
      </div>
      <div class="video-player">
        <div class="video-banner left">安全生产</div>
        <div class="video-container">
          <div class="video-thumbnail">
            <div class="play-button">
              <i class="el-icon-video-play"></i>
            </div>
          </div>
          <div class="video-controls">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: progress + '%' }"></div>
            </div>
            <div class="time-display">
              <span class="current-time">{{ formatTime(currentTime) }}</span>
              <span class="total-time">{{ formatTime(totalTime) }}</span>
            </div>
            <div class="control-buttons">
              <i class="el-icon-video-pause"></i>
              <i class="el-icon-refresh-left"></i>
              <i class="el-icon-full-screen"></i>
            </div>
          </div>
        </div>
        <div class="video-banner right">安全生产</div>
      </div>
    </div>

    <!-- 安全文化星级建设 -->
    <div class="star-construction-section">
      <div class="section-header">
        <h3>安全文化星级建设</h3>
      </div>
      <div class="star-content">
        <div class="left-panel">
          <div class="panel-item">
            <i class="el-icon-folder"></i>
            <span>基本条件</span>
          </div>
        </div>
        <div class="center-panel">
          <div class="safety-culture-diagram">
            <div class="inner-circle">
              <div class="core-text">安全文化</div>
              <div class="sub-sections">
                <div class="sub-item">理念</div>
                <div class="sub-item">行为</div>
                <div class="sub-item">环境</div>
              </div>
            </div>
            <div class="outer-ring">
              <div class="ring-item" v-for="item in ringItems" :key="item.id">
                {{ item.text }}
              </div>
            </div>
          </div>
        </div>
        <div class="right-panel">
          <div class="panel-item">
            <i class="el-icon-trophy"></i>
            <span>鼓励加分项</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 安全价值链 -->
    <div class="value-chain-section">
      <div class="section-header">
        <h3>安全价值链</h3>
      </div>
      <div class="value-chain-intro">
        将企业的员工工作内容、对安全文化建设有显著贡献的动作作为链接...
      </div>
      <div class="download-list">
        <div class="download-item" v-for="item in downloadItems" :key="item.id">
          <div class="item-description">{{ item.description }}</div>
          <div class="item-actions">
            <span class="file-name">
              <i class="pdf-icon">📄</i>
              {{ item.fileName }}
            </span>
            <div class="action-buttons">
              <a href="#" class="preview-btn">预览</a>
              <a href="#" class="download-btn">下载</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SafetyCulture',
  data() {
    return {
      progress: 7,
      currentTime: 13,
      totalTime: 1176,
      safetyConceptItems: [
        { id: 1, text: '安全文化手册', date: '2004-07-11' },
        { id: 2, text: '安全十条', date: '2004-07-11' },
        { id: 3, text: '安全方针', date: '2004-07-11' },
        { id: 4, text: '安全目标', date: '2004-07-11' },
        { id: 5, text: '安全价值观', date: '2004-07-11' }
      ],
      lawRegulationItems: [
        { id: 1, text: '山东省生产安全事故报告和调查处理办法', date: '2004-07-11' },
        { id: 2, text: '山东省燃气管理条例', date: '2004-07-11' },
        { id: 3, text: '山东省生产安全生产监督管理规定', date: '2004-07-11' },
        { id: 4, text: '危险化学品安全管理条例', date: '2004-07-11' },
        { id: 5, text: '安全生产法', date: '2004-07-11' }
      ],
      safetySystemItems: [
        { id: 1, text: '安全生产责任制', date: '2004-07-11' },
        { id: 2, text: '安全生产管理制度', date: '2004-07-11' },
        { id: 3, text: '危险化学品安全管理制度', date: '2004-07-11' },
        { id: 4, text: '电气安全管理制度', date: '2004-07-11' },
        { id: 5, text: '安全生产操作规程', date: '2004-07-11' }
      ],
      safetyDynamicItems: [
        { id: 1, text: '【集团动态】2024年集团...', date: '2004-07-11' },
        { id: 2, text: '【集团动态】安全中心...', date: '2004-07-11' },
        { id: 3, text: '【杨德生线】安全方针', date: '2004-07-11' },
        { id: 4, text: '【杨德生线】安全目标', date: '2004-07-11' },
        { id: 5, text: '【杨德生线】集团目标', date: '2004-07-11' }
      ],
      safetyEducationItems: [
        { id: 1, text: '【工贸培训计划】', date: '2004-07-11' },
        { id: 2, text: '【培训资料】', date: '2004-07-11' },
        { id: 3, text: '【培训题库】', date: '2004-07-11' },
        { id: 4, text: '【培训总结】', date: '2004-07-11' },
        { id: 5, text: '【应急演练】', date: '2004-07-11' }
      ],
      allStaffItems: [
        { id: 1, text: '【安全生产月】2023年...', date: '2004-07-11' },
        { id: 2, text: '【隐患排查】2024年...', date: '2004-07-11' },
        { id: 3, text: '【职业病防治监督检查】', date: '2004-07-11' },
        { id: 4, text: '【向德生建议】2024年...', date: '2004-07-11' },
        { id: 5, text: '【122安全生产日】2024年...', date: '2004-07-11' }
      ],
      continuousImprovementItems: [
        { id: 1, text: '【持续改进】一季度...', date: '2004-07-11' },
        { id: 2, text: '【持续改进】二季度...', date: '2004-07-11' },
        { id: 3, text: '【安全绩效评估】2024年...', date: '2004-07-11' },
        { id: 4, text: '【安全绩效】厂区安全...', date: '2004-07-11' },
        { id: 5, text: '【安全绩效】事故分析...', date: '2004-07-11' }
      ],
      ringItems: [
        { id: 1, text: '安全价值观' },
        { id: 2, text: '安全愿景' },
        { id: 3, text: '安全使命' },
        { id: 4, text: '安全方针' },
        { id: 5, text: '安全目标' },
        { id: 6, text: '安全制度' },
        { id: 7, text: '安全操作' },
        { id: 8, text: '安全培训' },
        { id: 9, text: '安全投入' },
        { id: 10, text: '安全监督' },
        { id: 11, text: '安全考核' },
        { id: 12, text: '安全激励' },
        { id: 13, text: '全员参与' },
        { id: 14, text: '持续改进' },
        { id: 15, text: '生产要素' },
        { id: 16, text: '安全环境' }
      ],
      downloadItems: [
        {
          id: 1,
          description: '企业安全文化建设核心价值，体现企业安全生产的价值链。',
          fileName: '安全文化手册.pdf'
        },
        {
          id: 2,
          description: '安全文化建设成果，体现企业安全生产的价值链。',
          fileName: '公司安全生产管理制度.pdf'
        },
        {
          id: 3,
          description: '企业月度或季度安全文化建设核心价值，体现企业安全生产的价值链。',
          fileName: '安全生产责任制.pdf'
        },
        {
          id: 4,
          description: '安全文化建设成果在工厂的认证结果。',
          fileName: '危险化学品安全管理制度.pdf'
        },
        {
          id: 5,
          description: '企业安全文化建设核心价值，体现企业安全生产的价值链。',
          fileName: '电气安全管理制度.pdf'
        },
        {
          id: 6,
          description: '安全文化建设成果，体现企业安全生产的价值链。',
          fileName: '员工安全生产操作规程.pdf'
        }
      ]
    }
  },
  methods: {
    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
    }
  }
}
</script>

<style scoped>
.safety-culture-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  font-family: 'Microsoft YaHei', sans-serif;
}

/* 顶部标题栏 */
.top-bar {
  background: linear-gradient(135deg, #2e7d32, #388e3c);
  color: white;
  padding: 12px 20px;
  text-align: left;
  font-size: 18px;
  font-weight: bold;
}

/* 导航栏 */
.nav-bar {
  background: linear-gradient(135deg, #81c784, #a5d6a7);
  display: flex;
  padding: 0;
  overflow-x: auto;
}

.nav-item {
  padding: 15px 20px;
  color: #666;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
  border-bottom: 3px solid transparent;
}

.nav-item:hover {
  color: #333;
}

.nav-item.active {
  color: white;
  background-color: #4caf50;
  border-bottom-color: #2e7d32;
}

/* 主要内容区域 */
.main-content {
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.left-column,
.right-column {
  flex: 1;
}

/* 内容区块 */
.content-section {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  border-bottom: 2px solid #e8f5e8;
  padding-bottom: 10px;
}

.section-header h3 {
  margin: 0;
  color: #2e7d32;
  font-size: 18px;
  font-weight: bold;
}

.view-more {
  color: #2196f3;
  text-decoration: none;
  font-size: 14px;
}

.view-more:hover {
  text-decoration: underline;
}

.section-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.section-content li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}

.section-content li:last-child {
  border-bottom: none;
}

.item-text {
  color: #333;
  flex: 1;
}

.item-date {
  color: #999;
  font-size: 12px;
  margin-left: 10px;
}

/* 视频播放器区域 */
.video-section {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.video-player {
  display: flex;
  align-items: center;
  gap: 20px;
  background: white;
  border-radius: 8px;
  padding: 30px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.video-banner {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: white;
  padding: 15px 25px;
  border-radius: 25px;
  font-weight: bold;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);
}

.video-container {
  flex: 1;
  max-width: 600px;
}

.video-thumbnail {
  background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
  height: 300px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-bottom: 15px;
}

.play-button {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.play-button i {
  font-size: 40px;
  color: #4caf50;
}

.play-button:hover {
  transform: scale(1.1);
  background: white;
}

.video-controls {
  display: flex;
  align-items: center;
  gap: 15px;
}

.progress-bar {
  flex: 1;
  height: 6px;
  background: #e0e0e0;
  border-radius: 3px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: #4caf50;
  border-radius: 3px;
  transition: width 0.3s ease;
}

.time-display {
  display: flex;
  gap: 5px;
  color: #666;
  font-size: 14px;
}

.control-buttons {
  display: flex;
  gap: 15px;
}

.control-buttons i {
  color: #666;
  cursor: pointer;
  font-size: 18px;
}

.control-buttons i:hover {
  color: #4caf50;
}

/* 安全文化星级建设 */
.star-construction-section {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.star-content {
  background: white;
  border-radius: 8px;
  padding: 40px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 40px;
}

.left-panel,
.right-panel {
  flex: 0 0 150px;
}

.panel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  color: #666;
}

.panel-item i {
  font-size: 24px;
  color: #4caf50;
}

.center-panel {
  flex: 1;
  display: flex;
  justify-content: center;
}

.safety-culture-diagram {
  position: relative;
  width: 400px;
  height: 400px;
}

.inner-circle {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  z-index: 2;
}

.core-text {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.sub-sections {
  display: flex;
  gap: 15px;
  font-size: 12px;
}

.outer-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #e8f5e8;
  border-radius: 50%;
}

.ring-item {
  position: absolute;
  font-size: 10px;
  color: #666;
  text-align: center;
  width: 60px;
  transform-origin: center;
}

.ring-item:nth-child(1) { top: 10px; left: 50%; transform: translateX(-50%); }
.ring-item:nth-child(2) { top: 25px; right: 25px; }
.ring-item:nth-child(3) { top: 50%; right: 10px; transform: translateY(-50%); }
.ring-item:nth-child(4) { bottom: 25px; right: 25px; }
.ring-item:nth-child(5) { bottom: 10px; left: 50%; transform: translateX(-50%); }
.ring-item:nth-child(6) { bottom: 25px; left: 25px; }
.ring-item:nth-child(7) { top: 50%; left: 10px; transform: translateY(-50%); }
.ring-item:nth-child(8) { top: 25px; left: 25px; }
.ring-item:nth-child(9) { top: 15px; right: 35px; }
.ring-item:nth-child(10) { top: 35px; right: 15px; }
.ring-item:nth-child(11) { bottom: 35px; right: 15px; }
.ring-item:nth-child(12) { bottom: 15px; right: 35px; }
.ring-item:nth-child(13) { bottom: 15px; left: 35px; }
.ring-item:nth-child(14) { bottom: 35px; left: 15px; }
.ring-item:nth-child(15) { top: 35px; left: 15px; }
.ring-item:nth-child(16) { top: 15px; left: 35px; }

/* 安全价值链 */
.value-chain-section {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.value-chain-intro {
  background: white;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  color: #666;
  line-height: 1.6;
}

.download-list {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.download-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.download-item:last-child {
  border-bottom: none;
}

.item-description {
  flex: 1;
  color: #333;
  line-height: 1.5;
  margin-right: 20px;
}

.item-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.file-name {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #d32f2f;
  font-weight: bold;
}

.pdf-icon {
  font-size: 16px;
}

.action-buttons {
  display: flex;
  gap: 10px;
}

.preview-btn,
.download-btn {
  color: #2196f3;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.preview-btn:hover,
.download-btn:hover {
  background: #e3f2fd;
  text-decoration: none;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .main-content {
    flex-direction: column;
  }
  
  .star-content {
    flex-direction: column;
    text-align: center;
  }
  
  .safety-culture-diagram {
    width: 300px;
    height: 300px;
  }
}

@media (max-width: 768px) {
  .nav-bar {
    flex-wrap: wrap;
  }
  
  .nav-item {
    padding: 10px 15px;
    font-size: 14px;
  }
  
  .video-player {
    flex-direction: column;
  }
  
  .video-banner {
    writing-mode: horizontal-tb;
    transform: none;
  }
  
  .download-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}
</style>
